import { Link } from "react-router-dom";
import "./index.scss";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { useAxiosWithAuth } from "@/utils/useAxiosWidthAuth";
import classNames from "classnames";
import XtxSkeleton from "@/components/library/xtxSkeleton";
interface Ilist {
  id: string;
  name: string;
  children: any[];
  goods: any[];
  brands: any[];
}
function HomeCategory() {
  const axios = useAxiosWithAuth();
  const [brand, setBrand] = useState(() => {
    return {
      id: "brand",
      name: "品牌",
      children: [{ id: "brand-chilren", name: "品牌推荐" }],
      brands: [],
    };
  });
  const list = useSelector((state: any) => state.category.list);
  const [menuList, setCategory] = useState<any[]>([]);
  const [categoryId, setCategoryId] = useState("");
  const [currentList, setCurrentList] = useState<Ilist>();
  useEffect(() => {
    if (list[0].id && list[0].children) {
      const categoryList = list.map((item: any) => {
        return {
          name: item.name,
          id: item.id,
          children: item.children && item.children.slice(0, 2),
          goods: item.goods,
        };
      });
      categoryList.push(brand);
      setCategory(categoryList);
    }
  }, [list]);
  useEffect(() => {
    if (categoryId !== "") {
      const filterList = menuList.find((item: any) => item.id === categoryId);
      setCurrentList(filterList);
    }
  }, [categoryId]);
  useEffect(() => {
    async function findBrand(limit: number = 6) {
      const res: any = await axios({
        method: "get",
        url: "/home/brand",
        params: { limit },
      });
      setBrand((pre) => ({
        ...pre,
        brands: res.result,
      }));
    }
    findBrand();
  }, []);
  return (
    <>
      <div className="home-category" onMouseLeave={() => setCategoryId("")}>
        <ul className="menu">
          {menuList?.length &&
            menuList.map((item: any) => (
              <li
                key={item.id}
                onMouseEnter={() => setCategoryId(item.id)}
                className={classNames(item.id === categoryId ? "active" : "")}
              >
                <Link to={`/menuList/${item.id}`}>{item.name}</Link>
                {item?.children ? (
                  item.children.map((sub: any) => (
                    <Link to={`/menuList/sub/${sub.id}`} key={sub.id}>
                      {sub.name}
                    </Link>
                  ))
                ) : (
                  <>
                    <XtxSkeleton
                      width="60px"
                      height="18px"
                      bg="rgba(255,255,255,0.2)"
                      style={{ marginTop: "8px" }}
                    />
                    <XtxSkeleton
                      width="50px"
                      height="18px"
                      bg="rgba(255,255,255,0.2)"
                    />
                  </>
                )}
              </li>
            ))}
        </ul>
        {/* 弹层 */}
        <div className="layer">
          <h4>
            {categoryId === "brand" ? "品牌推荐" : "分类推荐"}{" "}
            <small>根据您的购买或浏览记录推荐</small>
          </h4>
          {/* 商品 */}

          {categoryId !== "" && currentList?.goods && (
            <ul>
              {currentList.goods.map((item: any) => (
                <li key={item.id}>
                  <Link to="/">
                    <img src={item.picture} alt="" />
                    <div className="info">
                      <p className="name ellipsis-2">{item.name}</p>
                      <p className="desc ellipsis">{item.desc}</p>
                      <p className="price">
                        <i>¥ {item.price}</i>
                      </p>
                    </div>
                  </Link>
                </li>
              ))}
            </ul>
          )}
          {/* 品牌 */}
          {categoryId !== "" && currentList?.brands && (
            <ul>
              {currentList.brands.map((item: any) => (
                <li key={item.id} className="brand">
                  <Link to="/">
                    <img src={item.picture} alt="" />
                    <div className="info">
                      <p className="place">
                        <i className="iconfont icon-dingwei"></i>
                        {item.place}
                      </p>
                      <p className="name ellipsis">{item.name}</p>
                      <p className="desc ellipsis-2">{item.desc}</p>
                    </div>
                  </Link>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </>
  );
}
export default HomeCategory;
